<template>
  <el-drawer
      direction="rtl"
      v-model="visible"
  >
    <template #header>
      <span class="flow-ant-drawer-title">
        <el-icon><EditPen/></el-icon>
        <!-- <EditName v-model:value="node.name"/> -->
        <el-input ref="imputRef" v-if="isInput" type="text" autofocus @blur="isInput = false"
              v-model="node.name" :style="{ width: width }"/>
            <span v-else @click.stop="clickEvent()">{{ node.name }}</span>
      </span>
    </template>
    <div class="flow-setting-module">
      <el-tabs>
        <el-tab-pane key="1" label="通知设置">
          <div class="flow-setting-content">
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">节点名称</p>
              <el-input v-model="node.name" :size="size" class="w-full" placeholder="节点名称"/>
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">通知类型</p>
              <el-checkbox-group v-model="noticeType">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(notice, i) in notices" :key="i">
                    <el-checkbox :label="notice.value" :key="notice.value">{{ notice.name }}</el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">发送通知人</p>
              <UserSelector type="button" @copyData="copyData" :multiple="true" :user-list="node.props.assignedUser" :tableData="node.props.assignedUser"/>
              <!-- <FlowNodeApproval :groups="node.props.approverGroups" :node="node" title="通知人" /> -->
            </div>
            <div v-if="noticeType.includes(2)" class="flow-setting-item">
              <p class="flow-setting-item-title">外部手机号</p>
              <el-button type="link" icon="el-icon-plus" block>
                添加手机号
              </el-button>
            </div>
            <div v-if="noticeType.includes(3)" class="flow-setting-item">
              <p class="flow-setting-item-title">外部邮箱账号</p>
              <el-button type="link" icon="el-icon-plus" block>
                添加邮箱
              </el-button>
            </div>
            <div v-if="noticeType.includes(3)" class="flow-setting-item">
              <el-checkbox-group v-model="emailExt">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, i) in emailItems" :key="i">
                    <el-checkbox :label="item.value" :key="item.value">{{ item.name }}</el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
            <div v-if="noticeType.includes(3) && emailExt.includes(1)" class="flow-setting-item">
              <p class="flow-setting-item-title">抄送人</p>
              <!-- <FlowNodeApproval :groups="node.props.approverGroups" :node="node" title="抄送人" /> -->
            </div>
            <div v-if="noticeType.includes(3) && emailExt.includes(2)" class="flow-setting-item">
              <p class="flow-setting-item-title">密送人</p>
              <!-- <FlowNodeApproval :groups="node.props.approverGroups" :node="node" title="密送人" /> -->
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="2" label="内容设置">
          <div class="flow-setting-content">
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">选择已审核模板</p>
              <div class="tpl-flex-box">
                <el-button type="link" icon="plus-circle">
                  创建新模板
                </el-button>
              </div>
              <el-select :size="size" style="width: 100%;margin-bottom: 20px;" placeholder="请选择模板"></el-select>
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">主题</p>
              <el-input v-model="noticeTitle" :size="size" :rows="4" placeholder="主题"/>
            </div>
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">通知内容</p>
              <el-input type="textarea" v-model="noticeContext" :size="size" :rows="4" placeholder="通知内容"/>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="3" label="高级设置"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- <FlowDrawerFooter @close="onClose" /> -->
  </el-drawer>
</template>
<script setup name="FlowNoticeDrawer">
import {flowMixin} from '../../../mixins/flowMixin';
import EditName from '../../../common/EditName.vue';
// import FlowNodeApproval from '../Approver/Approval.vue';
// import FlowDrawerFooter from '../../common/DrawerFooter.vue';
import UserSelector from '../../../common/OrgPicker.vue';


import flowhook from '../../../mixins/flowhook';

import {reactive, ref, createApp,    nextTick,
  watch, computed, onMounted, toRefs, defineExpose} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const store = useStore();
const emit = defineEmits(['close'])

const {uuid, nameClass, delNode, drawerWidth, ccIcon, optionIcon} = flowhook();

const node = ref({});
const visible = ref(false);
const noticeContext = ref('');
const noticeTitle = ref('');
const noticeType = ref([]);
const emailExt = ref([]);
const isInput = ref(false);
const notices = reactive([
  {
    name: '站内通信',
    value: 1,
  },
  {
    name: '短信通知',
    value: 2,
  },
  {
    name: '邮件通知',
    value: 3,
  },
  {
    name: '钉钉通知',
    value: 4,
  },
  {
    name: '企业微信',
    value: 5,
  },
  {
    name: 'WeLink',
    value: 6,
  },
]);
const emailItems = reactive([
  {
    name: '添加抄送',
    value: 1,
  },
  {
    name: '添加密送',
    value: 2,
  },
]);

const copyData = (data) => {
  console.log("<---------------------是这个意思吗-------------------->",JSON.stringify(data.value))
  node.value.props.assignedUser = data.value;
}


const afterVisibleChange = (val) => {
  console.log('visible', val);
}
const showDrawer = (data) => {
  visible.value = true;
  node.value = data;
}
const onClose = () => {
  visible.value = false;
  emit('close');
}
const imputRef = ref();
const clickEvent = () => {
  isInput.value = true;
}

watch(isInput, () => {
  if (isInput.value) {
    nextTick(() => {
      imputRef.value.focus()
    })
  }
})
defineExpose({
  showDrawer
});

</script>
